/**
 * Created by Wilson on 1/23/2015.
 */
(function () {
    angular.module('app')
        .controller('reserveController', reserveController);

    reserveController.$inject = ['$scope'];
    function reserveController($scope) {
        $scope.drawCircle = drawCircle;
        $scope.moveClock = moveClock;
        $scope.clockText = clockText;
        $scope.clearAllInterval = clearAllInterval;

        function clearAllInterval() {
            if ($scope.clockInterval) {
                clearInterval($scope.clockInterval);
            }
            if ($scope.clockTextInterval) {
                clearInterval($scope.clockTextInterval);
            }
        }


        /* 外圈动画 start */
        var circleCanvas = document.getElementById('circleCanvas'),
            circleCtx = circleCanvas.getContext('2d');
        var step, startAngle, endAngle, add = Math.PI * 2 / 60;
        circleCtx.shadowOffsetX = 0; // 设置水平位移
        circleCtx.shadowOffsetY = 0; // 设置垂直位移
        circleCtx.shadowBlur = 0; // 设置模糊度
        circleCtx.lineWidth = 3.0;
        var counterClockwise = false;
        var x;
        var y;
        x = 160;
        y = 114;
        var radius;
        var animation_interval = 1000, n = 60;
        var intervalAction;
        var varColor = 60;

        function drawCircle() {
            step = 1;
            startAngle = 1.5 * Math.PI;
            circleCtx.strokeStyle = '#ff' + varColor + '00';//圆圈颜色
            //圆心位置

            radius = 91;
            intervalAction = setInterval(animation, animation_interval);
        }

        var animation = function () {
            if (step < n) {
                endAngle = startAngle + add;
                drawArc(startAngle, endAngle);
                startAngle = endAngle;
                step++;
                varColor--;
            } else {
                startAngle = 1.5 * Math.PI;
                //clearInterval(intervalAction);
                circleCtx.clearRect(0, 0, circleCanvas.width, circleCanvas.height);
                step = 1;
            }

        };

        function drawArc(s, e) {
            circleCtx.beginPath();
            circleCtx.arc(x, y, radius, s, e, counterClockwise);
            circleCtx.stroke();
        }

        /* 外圈动画end */

        function moveClock() {
            var r = 90;
            var clock = document.getElementById("clock");
            var reserve = document.getElementById("reserve");
            var offsetX = (document.body.offsetWidth - 320) / 2;
            var offsetY = clock.offsetHeight / 2;
            var t = 0;
            var xy = {top: 0, left: 0};
            offsetX = (document.body.offsetWidth - 320) / 2;
            xy.top = y + 60 - Math.cos(t) * r - offsetY + 24;
            xy.left = x + Math.sin(t) * r + offsetX;
            clock.setAttribute("style", 'top: ' + (xy.top) + 'px; left: ' + (xy.left - 18) + 'px');
            t += Math.PI * 2 / 60;
            $scope.clockInterval = setInterval(function () {
                offsetX = (document.body.offsetWidth - 320) / 2;
                xy.top = y + 60 - Math.cos(t) * r - offsetY + 24;
                xy.left = x + Math.sin(t) * r + offsetX;
                clock.setAttribute("style", 'top: ' + (xy.top) + 'px; left: ' + (xy.left - 18) + 'px');
                t += Math.PI * 2 / 60;
            }, 1000);
        }


        function clockText() {
            var time = document.getElementById('clock').innerHTML.split(':');
            var minute = time[0];
            var second = parseInt(time[1]).toFixed(2);
            $scope.clockTextInterval = setInterval(function () {
                if (second < 9) {
                    second++;
                    second = '0' + second;
                } else if (second < 59) {
                    second++;
                } else {
                    minute++;
                    second = '00';
                }
                var timeStr = minute + ":" + second;
                document.getElementById('clock').innerHTML = timeStr;
            }, 1000);

        }

        ons.ready(function () {
            $scope.moveClock();
            $scope.drawCircle();
            $scope.clockText();
        });


    }

})();